<template>
  <div class="tab-wrap flex-center-start">
    <div
      class="tab flex-center"
      v-for="item in tabs"
      :key="item.id"
      :class="dataTypeTabsId == item.id ? 'active' : ''"
      @click="changeTab(item.id)"
    >
      {{ item.name }}
    </div>
    <div class="flex-right" v-if="user.userRole == 3 && path === '/dataEvaluate'" style="margin-left: 1rem;">
      <div v-if="!examining">
        <el-button
          type="primary"
          size="small"
          @click="startExamine"
          >开始会审</el-button
        >
        <el-button
          type="primary"
          size="small"
          v-if="user.roleType != 1"
          @click="startFinalExamine"
          >开始终审</el-button
        >
      </div>
      <div v-else>
        <el-button type="success" size="small" @click="multiExamine" v-show="dataTypeTabsId == 2 || dataTypeTabsId == 3"
          >批量审核</el-button
        >
        <el-button type="danger" size="small" @click="cancelExamine"
          >取消审核</el-button
        >
      </div>
    </div>
    <el-dialog title="批量审核" :visible.sync="multiExamineFormVisible" :modal-append-to-body="false">
      <el-form :model="multiExamineForm">
        <el-form-item label="审核结果：" label-width="100px">
          <el-radio-group v-model="multiExamineForm.examineType">
            <el-radio :label="2">通过</el-radio>
            <el-radio :label="3">不通过</el-radio>
            <el-radio :label="4" v-if="finalCheck == 1">存疑</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见：" label-width="100px">
          <el-select
            v-model="expertMemoItems"
            multiple
            collapse-tags
            style="width: 100%;"
            @change="expertMemoChange"
            placeholder="请选择">
            <el-option
              v-for="(item,index) in expertMemoOptions"
              :key="index"
              :label="item.memo"
              :value="index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核意见：" label-width="100px">
          <el-input type="textarea" :rows="3" placeholder="请输入审核意见" v-model="multiExamineForm.expertMemo"/>
        </el-form-item>
      </el-form>
      <div class="footer flex-center">
        <div class="cancel" @click="multiExamineFormVisible = false">取消</div>
        <div class="confirm" @click="submitMultiExamine">确定</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      selectedId: 2,
      multiExamineFormVisible: false,
      multiExamineForm: {
        examineType: 2,
        expertMemo: '',
        finalCheck: 1, // 1-普通会审，2-终审
      },
      loading: null,
      expertMemoOptions: [],
      expertMemoItems: []
    };
  },
  inject:['reload'],
  props: {
    tabs: {
      default: () => [
        {
          name: "侦察图像",
          id: 2,
        },
        {
          name: "侦察视频",
          id: 3,
        },
        {
          name: "资料文档",
          id: 1,
        },
      ],
    },
  },
  computed: {
    ...mapState({
      dataTypeTabsId(state) {
        return state.app.dataTypeTabsId;
      },
      user(state) {
        return state.user;
      },
      examining(state) {
        return state.app.examining || false;
      },
      checkedDataIds: (state) => {
        return state.app.checkedDataIds;
      },
      finalCheck(state) {
        return state.app.finalCheck || 1
      }
    }),
  },
  watch: {},
  created() {
    this.path = this.$route.path;
    this.getMemo();
  },
  methods: {
    expertMemoChange(value) {
      this.multiExamineForm.expertMemo = ''
      if (value.length > 0) {
        value.forEach(item => {
          this.multiExamineForm.expertMemo += this.expertMemoOptions[item].memo + ' || ' 
        })
      }
    },
    async getMemo(){
      this.expertMemoOptions = await this.$api.getMemo()
    },
    changeTab(id) {
      if (this.examining) {
        this.$store.commit("app/setCheckedDataIds", '');
        this.cancelExamine();
      }
      this.selectedId = id;
      this.$store.commit("app/setDataTypeTabsId", id);
    },

    // 获取当前用户可审核的数据
    startExamine() {
      this.$store.commit("app/setFinalCheck", 1);
      this.$store.commit("app/setExamine", true);
    },

    // 开始终审
    startFinalExamine() {
      this.$store.commit("app/setFinalCheck", 2);
      this.$store.commit("app/setExamine", true);
    },

    // 批量会审
    multiExamine() {
      if (this.checkedDataIds !== "") {
        this.multiExamineFormVisible = true;
      } else {
        this.$alert("请选择批量会审的数据", "提示", {
          type: "warning",
        });
      }
    },

    // 批量会审提交会审结果
    submitMultiExamine() {
      this.loading = this.$loading({
        lock: true,
        text: "提交中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      if (this.dataTypeTabsId == 2) {
        let data = {}
        data.ids = this.checkedDataIds.split(",")
        data.examineType = this.multiExamineForm.examineType
        data.expertMemo = this.multiExamineForm.expertMemo
        data.finalCheck = this.finalCheck
        this.$api.examineZCImage(data).then((res) => {
          this.loading.close();
          // 成功
          if (res.indexOf("200") != -1) {
            this.multiExamineFormVisible = false
            this.$confirm("", "审核成功", {
              confirmButtonText: "确定",
              showClose: false,
              closeOnClickModal: false,
              closeOnPressEscape: false,
              showCancelButton: false,
              center: true,
            }).then(() => {
              this.$router.go(0)
            })
          } else {
            this.$notify({
              title: "提示",
              message: res.split(",")[1],
              type: "warning",
            });
          }
        });
      } else if (this.dataTypeTabsId == 3) {
        let data = {}
        data.ids = this.checkedDataIds.split(",")
        data.examineType = this.multiExamineForm.examineType
        data.expertMemo = this.multiExamineForm.expertMemo
        data.finalCheck = this.finalCheck
        this.$api.examineZCVideo(data).then((res) => {
          this.loading.close();
          // 成功
          if (res.indexOf("200") != -1) {
            this.multiExamineFormVisible = false
            this.$confirm("", "审核成功", {
              confirmButtonText: "确定",
              showClose: true,
              closeOnClickModal: true,
              closeOnPressEscape: true,
              showCancelButton: false,
              center: true,
            }).then(() => {
              this.$router.go(0)
            })
          } else {
            this.$notify({
              title: "提示",
              message: res.split(",")[1],
              type: "warning",
            });
          }
        });
      }
      
    },

    // 取消会审
    async cancelExamine() {
      // this.$store.commit("app/setCheckedDataIds", '');
      this.$store.commit("app/setFinalCheck", 0);
      this.$store.commit("app/setExamine", false);
    },
  }
};
</script>

<style lang="scss" scoped>
.tab-wrap {
  height: 0.5rem;
  border-bottom: 1px solid rgba(204, 204, 204, 0.2);
  .tab {
    cursor: pointer;
    position: relative;
    height: 100%;
    width: 1.3rem;
    color: #cccccc;
    /* &:after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      height: 4px;
      background: #1890ff;
      width: 0;
      transition: width ease-in-out 600ms;
    } */
    &.active {
      color: #1890ff;
      &:after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 4px;
        background: #1890ff;
      }
    }
  }
}
::v-deep .el-dialog {
  color: #ffffff;
  font-size: 0.16rem;
  width: 7.2rem !important;
  background: #474747;
  box-shadow: 0rem 0rem 0.38rem 0rem rgba(0, 0, 0, 0.45);
  border-radius: 0.05rem;
  z-index: 10000;
  .el-dialog__header {
    padding: 0.16rem;
    background: #143853 !important;
  }
  .el-dialog__title {
    color: #ffffff;
  }
  .el-dialog__body {
    color: #ffffff;
    background: #0f2d43 !important;
  }
}
::v-deep .el-form-item__label {
  color: #fff;
}
::v-deep .el-radio {
  color: #fff;
}
::v-deep .el-textarea__inner {
  color: white;
  cursor: pointer;
  background: #0355a4 !important;
  border: none;
}
::v-deep {
  .el-select {
    color: #ffffff;
    width: 100%;
    background: #0355a4;
    .el-input__inner {
      background: #0355a4;
    }
  }
}
.footer {
  margin-top: 0.3rem;
  color: #ffffff;
  margin-right: 0.3rem;
  justify-content: flex-end;
  .cancel {
    text-align: center;
    width: 1.2rem;
    height: 0.38rem;
    line-height: 0.38rem;
    background: #62656c;
    border-radius: 0.05rem;
  }
  .confirm {
    margin-left: 0.2rem;
    text-align: center;
    width: 1.2rem;
    height: 0.38rem;
    line-height: 0.38rem;
    background: #1890ff;
    border-radius: 0.05rem;
  }
}
</style>
